<script setup lang="ts">
  import { computed, PropType, ref } from 'vue'
  import CustomerAssociatedFiles from './CustomerAssociatedFiles.vue'
  import UpdateCustomerInfoModal from './UpdateCustomerInfoModal.vue'

  const props = defineProps({
    orderDetail: {
      type: Object as PropType<OrderDetail>,
      required: true,
    },
  })

  const emits = defineEmits<{
    (e: 'update_detail'): void
  }>()

  /**
   * 产品类型
   */
  const productType = computed(() => {
    if (props.orderDetail.workGoodsType === 1) {
      return 'business'
    }

    if (props.orderDetail.workGoodsType === 2) {
      return 'family'
    }

    return ''
  })

  // 更新公司信息弹窗显示状态
  const updateCustomerInfoModalVisible = ref(false)

  /**
   * 百事字段渲染文本
   */
  const baishiFieldRenderData = computed(() => {
    try {
      return JSON.parse(props.orderDetail.thirdExtraContentJson)
    } catch (error) {
      return null
    }
  })

  // 地址渲染文本
  const getAddress = computed(() => {
    let result: Array<string> = []
    if (props.orderDetail) {
      result.push(props.orderDetail.province)
      result.push(props.orderDetail.city)
      result.push(props.orderDetail.area)
      result.push(props.orderDetail.town)
      result.push(props.orderDetail.address)
      return result.join('-')
    }
    return result
  })
</script>

<template>
  <div>
    <div class="order_detail_user_info">
      <div class="title">
        客户信息
        <div
          v-if="[1, 2, 3].includes(props.orderDetail.status)"
          style="
            display: flex;
            align-items: center;
            color: #007cff;
            column-gap: 4px;
            cursor: pointer;
          "
          @click="updateCustomerInfoModalVisible = true"
        >
          <el-icon color="#007cff" size="16">
            <Edit />
          </el-icon>
          <span>修改</span>
        </div>
      </div>
      <div class="info">
        <div class="info_item">
          <div class="label">
            <template v-if="productType === 'business'">客户:</template>
            <template v-else>店铺/渠道:</template>
          </div>
          <div class="value">
            <CustomerAssociatedFiles
              v-if="props.orderDetail"
              :order-id="props.orderDetail.id"
              :user-name="props.orderDetail.name || ''"
            />
          </div>
        </div>
        <div class="info_item">
          <div class="label">
            <template v-if="productType === 'business'">反馈人员:</template>
            <template v-else>联系人:</template>
          </div>
          <div class="value">
            {{ props.orderDetail.sendForRepairUsername }}
          </div>
        </div>
        <div v-if="baishiFieldRenderData" class="info_item">
          <div class="label"> 行销公司（百事）: </div>
          <div class="value">{{
            baishiFieldRenderData
              ? baishiFieldRenderData.hck_salescompany
              : props.orderDetail.repairCompany
          }}</div>
        </div>
        <div v-if="productType === 'family'" class="info_item">
          <div class="label sendLabel">店铺联系电话:</div>
          <div class="value">{{ props.orderDetail.businessPhone }}</div>
        </div>
        <div class="info_item">
          <div class="label sendLabel">
            <template v-if="productType === 'business'">反馈电话:</template>
            <template v-else>联系电话:</template>
          </div>
          <div class="value">
            {{ props.orderDetail.sendForRepairPhone }}
          </div>
        </div>
        <div v-if="productType === 'business'" class="info_item">
          <div class="label"> 店名: </div>
          <div class="value">{{
            props.orderDetail.storeName ||
            (baishiFieldRenderData ? baishiFieldRenderData.hck_destname : '')
          }}</div>
        </div>
        <div v-if="productType === 'business'" class="info_item">
          <div class="label sendLabel">业务员电话:</div>
          <div class="value">
            {{
              props.orderDetail.businessPhone ||
              (baishiFieldRenderData ? baishiFieldRenderData.hck_ydphone : '')
            }}
          </div>
        </div>
        <div class="info_item address">
          <div class="label">所属地区:</div>
          <div class="value">{{ getAddress }}</div>
        </div>
        <!-- <div class="info_list"> -->
        <!-- <div class="info_item contact_person">
            <div class="label">联系人员:</div>
            <div class="value">
              <span>{{ props.orderDetail.contacts }}</span>
              <span>{{ props.orderDetail.contactsPhone }}</span>

              <HLink
                v-if="props.orderDetail.enableStatementVerifCode"
                :disabled="sendOrderStatementWriteOffCodeLoading"
              >
                <template v-if="sendOrderStatementWriteOffCodeLoading">发送中...</template>
                <span v-else @click="sendBtn">发送结单核销码</span>
              </HLink>
            </div>
          </div> -->
        <!-- </div> -->
        <!-- <div class="info_list"> -->
        <!-- <div class="info_item">
            <div class="label sendLabel">送修公司手机:</div>
            <div class="value">
              {{ props.orderDetail.repairCompanyPhone }}
            </div>
          </div> -->

        <!-- <div class="info_item">
            <div class="label sendLabel">送修人手机:</div>
            <div class="value">
              {{ props.orderDetail.sendForRepairPhone }}
            </div>
          </div> -->
        <!-- </div> -->
      </div>
    </div>

    <update-customer-info-modal
      v-model:visible="updateCustomerInfoModalVisible"
      :order-detail="props.orderDetail"
      @update="emits('update_detail')"
    />
  </div>
</template>

<style scoped lang="scss">
  .order_detail_user_info {
    display: flex;
    flex-direction: column;
    gap: 12px;

    .title {
      font-size: 14px;
      font-weight: bold;
      padding-left: 6px;
      border-left: 3px solid $primaryColor;
      display: flex;
      align-items: center;
      column-gap: 4px;
    }

    .info {
      padding-left: 9px;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;

      .info_item {
        width: calc((100% - 12px) / 2);
        display: flex;
        gap: 5px;

        .label {
          white-space: nowrap;
          color: #606266;
          text-align: right;
        }

        .value {
          word-break: break-all;
        }
      }

      .address {
        flex: 1;
      }
    }
  }
</style>
